<template>
    <view class="user-info">
          <view class="user-ava">
              <view class="ava-bor">
                  <fui-avatar shape="square" :src="user.avatar"></fui-avatar>
              </view>
              <view class="ids">
                <view class="user-name">{{user.nickname}}</view>
                <view class="id">口令:{{code}} <view @click="copy">复制</view> </view>
              </view>
          </view>
          <view @click="toUserInfo" class="user-information">
              完善个人信息 >
          </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import userStore from "@/store/user";
    interface IProps {
        code: string
    }
    const props =  withDefaults(defineProps<IProps>(), {})

    const toUserInfo = ()=>{
        uni.navigateTo({
            url:'/subPackages_user/userInfo/userInfo'
        })
    }

    const copy= ()=>{
        uni.setClipboardData({
            data: props.code,
            success: function () {
                uni.showToast({
                    title:"复制成功"
                })
            }
        });
    }
    const user = userStore()

  </script>
  
  <style lang="scss" scoped>
  .user-info{
      display: flex;
      justify-content: space-between;
      align-items: center; 
      padding-top: 20rpx;
      .user-ava{
          display: flex;
          align-items: center;
          z-index: 100;  
          .ava-bor{
          
              padding: 5rpx;
              height: 97rpx;
              z-index: 100;  
              margin: 20rpx;
          }
          .ids{
            z-index: 100;  
            .user-name{
                font-weight: bolder;
                margin-bottom: 20rpx;
            }
            .id{
                font-size: 23rpx;
                display: flex;
                view{
                    margin-left: 40rpx;
                    padding: 3rpx 15rpx;
                    background: linear-gradient(to right, #ffffff, rgb(192, 240, 254));
                    border-radius: 15rpx;
                }
            }
          }
      }
      .user-information{
          display: flex;
          background: linear-gradient(to right, #ffffff, rgb(192, 240, 254));
         padding: 5rpx 20rpx;
         font-size: 23rpx;
         border-radius: 23rpx;
         margin-right: 30rpx;
         z-index: 100;  
      }
  }
  .user-tip{
      margin-top: 20rpx;
      font-size: 23rpx;
  }
  </style>
  